<template>
  <div class="warpper-box ensureOrder">
    <enterprise-select v-if="userInfo.type == 4" ref="enterprise"
      @enterpriseChange="enterpriseChange"></enterprise-select>
    <a-card style="margin-top: 10px;">
      <a-form layout="inline">
        <a-form-item label="订单编号">
          <a-input placeholder="请输入订单编号" v-model="params.insureOrderId"></a-input>
        </a-form-item>
        <a-form-item label="账单编号">
          <a-input placeholder="请输入账单编号" v-model="params.insureBillId"></a-input>
        </a-form-item>
        <a-form-item label="订单类型">
          <a-select v-model="params.orderType" placeholder="选择订单类型" style="width: 160px;">
            <a-select-option key="1">正常订单</a-select-option>
            <a-select-option key="2">列账订单</a-select-option>
            <a-select-option key="3">补缴订单</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="订单类别">
          <a-select v-model="params.orderPayType" placeholder="选择订单类别" style="width: 160px;">
            <a-select-option key="1">社保</a-select-option>
            <a-select-option key="2">公积金</a-select-option>
            <a-select-option key="3">社保&公积金</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="订单周期">
          <a-month-picker valueFormat="YYYY-MM" placeholder="选择月份" v-model="params.insureMonth"></a-month-picker>
        </a-form-item>
        <a-form-item label="创建时间">
          <a-date-picker valueFormat="YYYY-MM-DD" placeholder="选择日期" v-model="params.createdTime"></a-date-picker>
        </a-form-item>
        <a-form-item label="选择服务商">
          <a-select placeholder="请选择订单服务商" v-model="params.parkId" style="width: 160px;">
            <a-select-option v-for="item in parkList" :key="item.parkId">{{ item.parkName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" icon="search" @click="loadTable(true)">搜索</a-button>
          <a-button type="primary" icon="setting" @click="reset()">重置</a-button>
          <a-button type="primary" :disabled="this.selectedRowKeys.length == 0" @click="payBatchHandle()">批量支付</a-button>
          <a-button type="danger" :disabled="this.selectedRowKeys.length == 0" @click="noPayBatchHandle()">批量拒绝</a-button>
          <a-button type="primary" @click="downloadOrder">导出</a-button>
        </a-form-item>
      </a-form>
      <a-tabs v-model="params.insureBillStatus" @tabClick="orderStatusChange" type="card" style="margin-top: 20px;">
        <a-tab-pane key="1" tab="待结算"></a-tab-pane>
        <a-tab-pane key="2" tab="已结算"></a-tab-pane>
        <a-tab-pane key="3" tab="已拒绝"></a-tab-pane>
      </a-tabs>
      <div v-if="params.insureBillStatus == 1">
        <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
          @change="handleTableChange" rowKey="insureBillId" style="margin-top: 10px;"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
          <!-- 操作栏-->
          <span slot="action" slot-scope="text, record">
            <!-- 编辑模块 | 字段 -->
            <span v-show="params.insureBillStatus == 1">
              <a-popconfirm title="确认支付?" ok-text="确认" cancel-text="取消" @confirm="payHandle(record)">
                <a>支付</a>
              </a-popconfirm>
              <a-divider type="vertical" />
              <a-popconfirm title="确认拒绝?" ok-text="确认" cancel-text="取消" @confirm="noPayHandle(record)">
                <a>拒绝</a>
              </a-popconfirm>
              <a-divider type="vertical" />
            </span>
            <a @click="goDetail(record)">详情</a>
          </span>
        </a-table>
      </div>
      <div v-else>
        <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
          @change="handleTableChange" rowKey="insureBillId" style="margin-top: 10px;">
          <!-- 操作栏-->
          <span slot="action" slot-scope="text, record">
            <!-- 编辑模块 | 字段 -->
            <a @click="goDetail(record)">详情</a>
          </span>
        </a-table>
      </div>
    </a-card>
    <add-info ref="createInfo" @on-ok="addLoad"></add-info>
  </div>
</template>

<script>
import store from '@/store'
import EnterpriseSelect from "@/components/human/enterpriseSelect.vue"
import {
  COLUMNS_ENSUREORDER
} from "./form"
import AddInfo from "./parOrderDetail_add.vue"
import {
  getTablePage,
  insureBillPay,
  insureBillPayRefuse,
  insureBillPayBatch,
  insureBillPayRefuseBatch,
  exportInsureBill
} from "@/api/human/ensureEnsureOrder"
import {
  parkRelation
} from "@/api/human/ensurePayOrder"
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'ensureOrder',
  components: {
    AddInfo,
    EnterpriseSelect
  },
  data() {
    return {
      params: {
        insureBillStatus: '1',
        insureOrderId: '',
        insureBillId: '',
        orderType: undefined,
        orderPayType: undefined,
        parkId: undefined,
        insureMonth: '',
        createdTime: '',
      },
      table: {
        columns: COLUMNS_ENSUREORDER,
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },

      enterpriseId: "", // 企业id
      enterpriseData: [], // 客户列表
      parkList: [], // 服务商列表

      selectedRowKeys: [], // 选择的table数据id
      selectedRows: [], // 选择的table数据
    }
  },
  filters: {

  },
  mounted() {
    window.addEventListener('keyup', this.keyDown);
    if (this.userInfo.type == 4) {
      this.$refs.enterprise.getEnterpriseData();
    } else {
      this.enterpriseId = this.userInfo.relationId
      this.getParkRelation();
      this.loadTable(true);
    }
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {

  },
  methods: {
    // table复选框选择
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    // 获取列表
    async loadTable(flag) {
      this.table.loadData = [];
      this.selectedRowKeys = [];
      let params = this.params;
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.enterpriseId = this.enterpriseId;
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await getTablePage(params);
      if (code === '1') {
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    // 导出订单
    downloadOrder() {
      exportInsureBill({
        enterpriseId: this.enterpriseId,
        insureBillStatus: this.params.insureBillStatus
      }).then(res => {
        const blob = new Blob([res]);
        const fileName = '社保公积金订单.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    orderStatusChange(e) {
      this.loadTable(true);
    },
    // 获取服务商列表
    async getParkRelation() {
      const { code, data } = await parkRelation(this.enterpriseId);
      if (code == "1") {
        this.parkList = data;
      }
    },
    // 删除订单
    async remove(row) {
      let params = {
        insureOrderStaffId: row.insureOrderStaffId,
      }
      const { code } = await deleteInsureOrderStaff(params)
      if (code == 1) {
        this.$message.success('操作成功');
        this.loadTable(true);
      }
    },
    // 支付
    async payHandle(row) {
      let params = {
        insureBillId: row.insureBillId
      }
      const { code } = await insureBillPay(params)
      if (code == 1) {
        this.$message.success('操作成功');
        this.loadTable(true);
      }
    },
    // 拒绝
    async noPayHandle(row) {
      let params = {
        insureBillId: row.insureBillId
      }
      const { code } = await insureBillPayRefuse(params)
      if (code == 1) {
        this.$message.success('操作成功');
        this.loadTable(true);
      }
    },
    // 批量支付
    async payBatchHandle() {
      let params = {
        insureBillIds: this.selectedRowKeys
      }
      const { code } = await insureBillPayBatch(params)
      if (code == 1) {
        this.$message.success('操作成功');
        this.loadTable(true);
      }
    },
    // 批量拒绝
    async noPayBatchHandle() {
      let params = {
        insureBillIds: this.selectedRowKeys
      }
      const { code } = await insureBillPayRefuseBatch(params)
      if (code == 1) {
        this.$message.success('操作成功');
        this.loadTable(true);
      }
    },
    // 跳转订单详情
    goDetail(row) {
      this.$router.push({ name: 'humanResourcesEnsurePayOrderDetailCode', query: { insureOrderId: row.insureOrderId, orderStatus: row.orderStatus, orderType: 1, enterpriseId: this.enterpriseId } });
    },
    // 导出参保订单
    payOrderExport() {
      exportInsureOrderStaff(this.params).then(res => {
        const blob = new Blob([res]);
        const fileName = '参保订单.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    // 企业选择回调
    enterpriseChange(value) {
      this.enterpriseId = value;
      this.getParkRelation();
      this.loadTable(true);
    },
    addLoad() {
      this.loadTable(true);
    },
    reset() {
      this.params.insureOrderId = '';
      this.params.insureBillId = '';
      this.params.orderType = undefined;
      this.params.orderPayType = undefined;
      this.params.parkId = undefined;
      this.params.insureMonth = '';
      this.params.createdTime = '';
      this.loadTable(true);
    }
  }
}
</script>
<style lang="less">
.ensureOrder {
  .ant-tabs-bar {
    margin-bottom: 5px;
  }
}
</style>